<div class="content-box">
    <div class="block-list">
        <ngx-simplebar [options]="options">
            <div class="block-grid">
                @for(block of blocks; track block.type) {
                <div class="block-item" (click)="onBlockClick(block)" [ngClass]="{'active': block === selectedBlock}">
                    <app-block-item [blockDefinition]="block">
                    </app-block-item>
                </div>
                }
            </div>
        </ngx-simplebar>
    </div>
    <div class="mid-box">

    </div>
    <div class="right-box">
        <div class="test-box">
            <div>
                <app-block-test [blockDefinition]="currentBlockJson"></app-block-test>
            </div>
            <div>
                <app-monaco-editor [code]="testcode"></app-monaco-editor>
            </div>
        </div>
        <nz-tabset [nzSize]="'small'" [(nzSelectedIndex)]="selectedIndex" (nzSelectedIndexChange)="onTabChange($event)"
            nzType="editable-card" [nzHideAdd]="true">
            @for (file of openedFiles; track $index) {
            <nz-tab [nzTitle]="titleTemplate">
                <ng-template #titleTemplate>
                    <span class="tab-inner">
                        {{ file.title }} @if (file.isDirty) {<span class="blue-point"></span>}
                    </span>
                </ng-template>
            </nz-tab>
            }
        </nz-tabset>
        @if(openedFiles.length > 0) {
        <app-monaco-editor [code]="code" (codeChange)="onCodeChange($event)"></app-monaco-editor>
        }
    </div>
</div>